<template>
  <div v-loading="loading">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 部门列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.parent_id"
                   placeholder="上级部门"
                   clearable
                   size="medium"
                   class="handle-select mr10">
          <el-option v-for="(item, index) in allDepartments"
                     :key="index"
                     :value="item.id"
                     :label="item.name_path"></el-option>
        </el-select>
        <el-select v-model="query.leader_id"
                   placeholder="负责人"
                   clearable
                   size="medium"
                   class="handle-select mr10">
          <el-option v-for="(item, index) in allStaffs"
                     :key="index"
                     :value="item.id"
                     :label="item.name"></el-option>
        </el-select>
        <el-input v-model="query.name"
                  placeholder="部门名称"
                  clearable
                  size="medium"
                  class="handle-input mr10"></el-input>
        <el-select v-model="query.status"
                   placeholder="部门状态"
                   clearable
                   size="medium"
                   class="handle-select mr10">
          <el-option v-for="(item, index) in departmentStatus"
                     :key="index"
                     :value="item.value"
                     :label="item.label"></el-option>
        </el-select>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="medium"
                   @click="handleSearch">搜索</el-button>
        <el-button type="primary"
                   icon="el-icon-download"
                   size="medium"
                   style="float: right"
                   @click="exportExcel">导出</el-button>
      </div>
    </div>
    <vue3-tree-org :data="departmentTreeData"
                   :disabled="disabled"
                   :horizontal="horizontal"
                   :collapsable="collapsable"
                   :label-style="style"
                   :scalable="scalable"
                   :node-draggable="draggable"
                   :only-one-node="onlyOneNode"
                   :clone-node-drag="cloneNodeDrag"
                   :node-draging="nodeDragMove"
                   :node-drag-end="nodeDragEnd"
                   :defineMenus="defineMenus"
                   @on-contextmenu="onMenus"
                   @on-expand="onExpand"
                   @on-node-focus="onNodeFocus"
                   @on-node-click="onNodeClick" />
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  staffAll,
  departmentTree,
  departmentAll,
  exportDepartment,
} from "../../api/index";

export default {
  name: "department_tree",
  setup() {
    const loading = ref(false)
    const query = reactive({
      name: "",
      parent_id: "",
      leader_id: "",
      status: "",
    });
    const departmentTreeData = ref({})
    // 获取组织架构图数据
    const getData = () => {
      loading.value = true
      departmentTree(query).then((res) => {
        if (res.code == 0) {
          delete res.data.pid
          departmentTreeData.value = res.data
          loading.value = false
        } else {
          loading.value = false
          ElMessage.error(res.msg)
        }
      });
    };

    // 部门状态
    const departmentStatus = ref([
      {
        value: '未生效',
        label: '未生效'
      }, {
        value: '生效',
        label: '生效'
      }, {
        value: '封存',
        label: '封存'
      },
    ])

    const horizontal = ref(false)
    const collapsable = ref(true)
    const onlyOneNode = ref(true)
    const cloneNodeDrag = ref(false)
    const expandAll = ref(true)
    const disabled = ref(false)
    const draggable = ref(false)
    const scalable = ref(false)  // 是否可缩放
    const style = ref({
      background: "#dbe4e7",
      color: "#106ba3",
    })
    // 自定义右键的菜单
    const defineMenus = ref([
      // { name: '新增部门', command: 'add' },
      // { name: '编辑部门', command: 'edit' },
      // { name: '封存部门', command: 'delete' },
    ])

    const nodeDragMove = (data) => {
      console.log(data)
    }
    // 点击节点，展开事件
    const onExpand = (e, data) => {
      // console.log(e, data)
    }
    // 节点点击事件
    const onNodeClick = (e, data) => {
      // console.log(data)
    }
    const onMenus = ({ node, command }) => {
      console.log(node, command)
    }
    // 拖拽事件
    const nodeDragEnd = (data, isSelf) => {
      console.log(data, isSelf)
    }
    // 编辑保存事件
    const onNodeFocus = (e, data) => {
      console.log(e, data)
    }

    // 查询操作
    const handleSearch = () => {
      query.pageIndex = 1;
      getData();
    };

    // 页面初始化，渲染完dom后获取初始数据绑定到dom上
    onMounted(() => {
      getStaffs();
      getDepartments();
      getData();
    });

    // 获取员工列表
    const allStaffs = ref([])
    const getStaffs = () => {
      staffAll().then((res) => {
        if (res.code == 0) {
          // 赋值
          allStaffs.value = res.data
          return
        }
        allStaffs.value = []
      });
    };

    // 获取所有部门
    const allDepartments = ref([])
    const getDepartments = () => {
      departmentAll().then((res) => {
        if (res.code == 0) {
          // 给组件赋值
          allDepartments.value = res.data
        } else {
          allDepartments.value = []
        }
      })
    }

    // 导出excel
    const exportExcel = () => {
      exportDepartment(query).then((res) => {
        if (res.code == 0) {
          editVisible.value = false
          ElMessage.success("成功！");

          // 下载文件，原理：拼接url，后端接收到get请求，返回文件信息，实现导出功能
          const a = document.createElement('a')
          a.href = "/api/download?file_path=" + res.data.file_path + "&file_name=" + res.data.file_name
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click() // 点击下载
          document.body.removeChild(a) // 下载完成移除元素
        } else {
          ElMessage.error(res.msg)
        }
      })
    };

    return {
      loading,
      query,
      allStaffs,
      allDepartments,
      handleSearch,
      exportExcel,
      scalable,
      departmentStatus,
      departmentTreeData,
      horizontal,
      collapsable,
      onlyOneNode,
      cloneNodeDrag,
      expandAll,
      disabled,
      style,
      nodeDragMove,
      draggable,
      onExpand,
      onNodeClick,
      onMenus,
      nodeDragEnd,
      defineMenus,
      onNodeFocus,
    };
  },
};
</script>


<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.green {
  color: #67c23a;
}
.yellow {
  color: #e6a23c;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.zm-tree-org {
  height: 500px;
}
.zoom-container > div {
  transform: translate(10px, 0px);
}
</style>
